<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      :width="props.width"
      :height="props.height"
      preserveAspectRatio="none meet"
      viewBox="0 0 245.707 30.414"
    >
      <g id="文字装饰5" transform="translate(-79.293 17.707)">
        <path
          id="直线_14备份_6"
          data-name="直线 14备份 6"
          d="M80,10,89.853,0H324"
          transform="translate(0 2)"
          fill="none"
          :stroke="states.color"
          stroke-linecap="square"
          stroke-miterlimit="10"
          stroke-width="1"
        />
        <path
          id="直线_14备份_6-2"
          data-name="直线 14备份 6"
          d="M0,10,6.774,3.125,9.853,0"
          transform="translate(80 -5)"
          fill="none"
          :stroke="states.color"
          stroke-linecap="square"
          stroke-miterlimit="10"
          stroke-width="1"
        />
        <path
          id="直线_14备份_6-3"
          data-name="直线 14备份 6"
          d="M0,10,6.774,3.125,9.853,0"
          transform="translate(80 -11)"
          fill="none"
          :stroke="states.color"
          stroke-linecap="square"
          stroke-miterlimit="10"
          stroke-width="1"
        />
        <path
          id="直线_14备份_6-4"
          data-name="直线 14备份 6"
          d="M0,10,6.774,3.125,9.853,0"
          transform="translate(80 -17)"
          fill="none"
          :stroke="states.color"
          stroke-linecap="square"
          stroke-miterlimit="10"
          stroke-width="1"
        />
        <rect
          id="矩形"
          width="8"
          height="4"
          transform="translate(317)"
          :fill="states.color"
        />
      </g>
      <text
        :x="states.x"
        :y="states.y"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

onMounted(() => {
  states.value.x = "20%";
  states.value.y = "50%";
});
</script>

<style scoped lang="scss"></style>
